<template>
  <div class="home">
	  <div id="one">
	  	<div id="search">
	  		<i class="fa fa-search"></i><input type="text" v-model="value"/>
	  	</div>
	  	
	  </div>
	  <div id="two">
	  	<div id="two-p">
	  		电影/电视剧/综艺
	  	</div>
		<div id="content" v-for="(item,index) in Person" :key="index">
			<div id="imag">
				<img :src="item.Src" >
			</div>
			<div id="text">
				<p class="frist">{{item.MovieNmae}}</p>
				<p>剧情 喜剧 犯罪</p>
				<p>2020-6-30</p>
			</div>
			<div id="span">
				<span>{{item.check}}</span>
			</div>
		</div>
	  </div>
	
  </div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				NoWLists:[],
				searchList:{},
				value:''
			}
		},
		created() {
			this._initstart();
		},
		computed:{
			Person(){
				// return this.NoWLists.filter((item)=>{
				// 	return item.MovieNmae.indexOf(this.value) !== -1 
				// })
				return this.NoWLists.filter((item)=>{
					if(item.MovieNmae.indexOf(this.value) !== -1) {
						return item;
					}
				})
			}
		},
		methods:{
			_initstart(){
					var that = this;
					axios.get('/mock/cinema.json')
					  .then(function (response) {
					    console.log(response);
						if(response.status==200){
							if(response.data && response.data.NoWLists ){
								that.NoWLists = response.data.NoWLists.concat(response.data.ComingLists);
							}
							// else if(response.data && response.data.ComingLists){
							// 	that.NoWLists = response.data.ComingLists
							// }
						}
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				}
				// this.searchList=this.List
			//正则表达式查找
			// searchInput(value){
			// 	console.log(this.value=='');
			// 	console.log(this.searchList)
			// 	if(value===''){
			// 		this.searchList=this.Lists
			// 	}else{
			// 		console.log(value);
			// 		this.searchList = [];
			// 		console.log(this.searchList)
			// 		var str='';
			// 		for(var i =0;i<value.lenght;i++){
			// 			str = str + '(' + value[i] + ')([\\s]*)';//跨字符匹配
			// 		}
			// 		var reg =new RegExp(str);
			// 		console.log(reg);
			// 		for(var i= 0;i<this.List.length;i++){
			// 			var name =this.List[i].MovieNmae;
			// 			var regM=name.match(reg);
			// 			if(null !==regM){
			// 				this.searchList.push(this.List[i])
			// 			}
			// 		}
			// 	}
			// }
		}
	}
</script>
<style scoped="scoped">
	.home{
		width: 100%;
		height: 35px;
	}
	#one{
		background-color: #ebebeb;
		width: 100%;
		height:35px ;
		display: flex;
		justify-content: center;
		align-items: center;
		/* border: #2C3E50 solid 1px; */
	}
	#search{
		border: 1px solid #CCCCCC;
		margin: auto auto;
		width: 90%;
		height: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fbfff2;
	}
	input{
		border: none;
		flex: 1;
		
	}
	i{
		margin-left: 5px;
	}
	#two{
		margin-top: 5px;
		width: 100%;
		margin: auto auto;
	}
	#two-p{
		margin: auto auto;
		width: 90%;
		/* padding-left: 20px; */
		height: 35px;
		line-height: 35px;
		/* border: 1px solid #CCCCCC; */
	}
	#content{
		display: flex;
		flex-direction: row;
		border: #aaaaaa solid 1px;
		padding: 5px;
		
	}
	#imag{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#imag img{
		width: 90px;
		height: 110px;
		margin-left: 15px;
	}
	#text{
		margin-left: 10px;
		flex: 1;
	}
	#text .frist{
		font-weight: bold;
		font-size: 18px;
	}
	#text p{
		margin-bottom:10px;
		font-size: 14px;
	}
	#span{
		margin-right:15px;
		color: #e6ef34;
	}
</style>
	
